// 视频
(function(){
  const movie=document.querySelector('video')
  document.querySelector('.showComplete').addEventListener('click',function(){
    console.log(1);
    if (movie.requestFullscreen) {
      movie.requestFullscreen();
    }else if (movie.webkitRequestFullScreen) {
      movie.webkitRequestFullScreen();
    }
  })
}());

// part3
  let i = 0
  render()
  const masks = document.querySelectorAll('.card .mask2')
  function render(){
    setid=setInterval(function(){
    i++
    masks[i].click()
     if(i>=3){
      i=-1
     }
    },6000)
  }
function mouseover(e){
  if(e.target.className==='mask2'){
    // console.log(e.target)
    // 蓝色背景部分
    const img=document.querySelectorAll('.part3 .card>img:nth-child(2)')
    // console.log(img);
    for(let i=0;i<img.length;i++){
      img[i].classList.add('no')
    }
    e.target.nextElementSibling.classList.remove('no')
    
    // 玻璃效果
    const img2=document.querySelectorAll('.part3 .card>img:nth-child(3)')
    for(let i=0;i<img2.length;i++){
      img2[i].style.opacity=0
    }
    e.target.parentNode.children[2].style.opacity=1
    function guan(){
      e.target.parentNode.children[2].style.opacity=0
    }
    setInterval
    let setID=setTimeout(guan,500)
    // if(setID){
    //   clearTimeout(setID)
    // }setID=setTimeout(guan,500)

    // 动图部分
    const gif=document.querySelectorAll('.part3 .card .card-hd img:first-child')
    const gif2=document.querySelectorAll('.part3 .card .card-hd img:last-child')
    for(let i=0;i<gif.length;i++){
      gif[i].classList.remove('no')
      gif2[i].classList.add('no')
    }
    e.target.parentNode.children[3].children[0].classList.add('no')
    e.target.parentNode.children[3].children[1].classList.remove('no')

    // 文字部分
    const txt=document.querySelectorAll('.part3 .card .card-bd')
    for(let i=0;i<txt.length;i++){
      txt[i].classList.remove('active')
    }
    e.target.parentNode.children[4].classList.add('active')

    // 右下角
    const icon=document.querySelectorAll('.part3 .card .card-bd img')
    for(let i=0;i<icon.length;i++){
      icon[i].classList.remove('move')
    }
    e.target.parentNode.children[4].children[2].classList.add('move')
    // 向上移动
     const active=document.querySelectorAll('.part3 .active')
    for(let i=0;i<active.length;i++){
       active[i].classList.remove('active')
    }
    e.target.parentNode.classList.add('active')
  }
}
const w=document.querySelector('.part3 .w')
  w.addEventListener('click',mouseover)
  w.addEventListener('mouseover',mouseover)
  w.addEventListener('mouseover',function(){
    clearInterval(setid)
  })
  w.addEventListener('mouseout',function(e){
    i = e.target.dataset.id
    setid=setInterval(function(){
      i++
      masks[i].click()
       if(i>=3){
        i=-1
       }
      },1000)
  })



// part4

  document.querySelector('.part4 .slide-list').addEventListener('mouseover',function(e){
    if(e.target.className==='mask2'){
      // 图片宽度
      const big=document.querySelector('.big')
      if(big){
        big.classList.remove('big')
      }
      e.target.parentNode.classList.add('big')
      // 黑色遮罩层
      const no=document.querySelector('.mask.no')
      if(no){
        no.classList.remove('no')
      }
      e.target.previousElementSibling.classList.add('no')
      // 文字部分
      const wrap=document.querySelectorAll('.slide-list .container .text-wrap')
      for(let i=0;i<wrap.length;i++){
        wrap[i].classList.add('no')
      }
      e.target.parentNode.children[3].classList.remove('no')
      const single=document.querySelectorAll('.slide-list .container .text-single')
      // console.log(single);
      for(let i=0;i<single.length;i++){
        single[i].classList.remove('no')
      }
      e.target.parentNode.children[4].classList.add('no')
      // 小盒子图片样式
      const zuo=document.querySelectorAll('.slide-list .container img')
      for(let i=0;i<zuo.length;i++){
        zuo[i].classList.add('zuo')
      }
      // console.log( e.target.parentNode.children[0]);
      e.target.parentNode.children[0].classList.remove('zuo')
    }
  })


// 滚动，animation-show显示
const monkey=document.querySelector('.part2')
  window.addEventListener('scroll',function(){
    if(document.documentElement.scrollTop>monkey.offsetTop){
      document.querySelector('.animation-show').style.opacity=1
    }
    else{
      document.querySelector('.animation-show').style.opacity=0
    }
  })
